
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
        .king{
            width:725px;
            margin: 10px auto;

            /*background: url("images/bg.png") no-repeat;*/
            /*overflow: hidden;*/
            padding: 6px;
            /*border: 1px solid red;*/
            height:70px;
            background-color: #143757;
        }

        ul li{
            list-style: none;
            float: left;
            width:69px;
            height: 69px;
            margin-right: 10px;
            /*border: 1px solid blue;*/
            position: relative;
        }
        .small{
            position: absolute;
            top:0;
            left: 0;
            width:69px;
            height: 69px;
            border-radius: 5px;
        }
        .big{
            width: 224px;
            height: 69px;
            display: none;
        }
        .current {
            width: 224px;
        }
        .current .small{
            display: none;
        }
        .current .big{
            display: block;
        }


    </style>

</head>

<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $(".king li").mouseenter(function () {
        console.log($(this))
        $(this).animate({width:224}).find('.small').fadeOut().siblings(".big").fadeIn(500);
        $(this).siblings().animate({width:69 }).find('.small').fadeIn().siblings('.big').fadeOut();
    })
})
</script>
<div class="king">
    <ul>
        <li class="current">
            <a href="#">
                <img src="images/m1.jpg" alt="" class="small">
                <img src="images/m.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/l1.jpg" alt="" class="small">
                <img src="images/l.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/c1.jpg" alt="" class="small">
                <img src="images/c.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/w1.jpg" alt="" class="small">
                <img src="images/w.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/z1.jpg" alt="" class="small">
                <img src="images/z.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/h1.jpg" alt="" class="small">
                <img src="images/h.png" alt="" class="big">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/t1.jpg" alt="" class="small">
                <img src="images/t.png" alt="" class="big">
            </a>
        </li>
    </ul>

</div>


<hr>
<h1>王者荣耀</h1>

</body>

</html>